<!DOCTYPE html>
<html>
<head>
	<title>子账户修改</title>
	<!--#include("../../common/common-link.html"){}-->
	<style type="text/css">
		.table-panel .content table{margin: 0 auto;margin-top: 10px;}
		.table-panel .content table tr{height: 49px;}
		.table-panel .content table tr.btns td .btn{width: 123px;outline: none;margin-top:20px;}
		.table-panel .content table tr td .need{color: red;}
		.table-panel .content table tr td.left{text-align: right;}
		.table-panel .content table tr td.right{text-align: left;}
		.table-panel .content table tr td.right .form-control{width:160px;}
		.table-panel .content table tr td.center{text-align: center;}
		.table-panel .content table tr td .input-group{width:320px;}
		.table-panel .content table tr td .type-input-group{width:160px;}
		.table-panel .content table tr td .type-input-group .type-input-group-btn .btn-success{border-left-color: #2cae4c}
	</style>
</head>
<body>
	<div id="container-wrap" style="display:none;">
		<div class="table-panel">
			<div class="header">
				<h4 class="title">子账户修改</h4>
				<div class="btns-group">
					<input type="button" class="btn button" onclick="javascript:window.history.back()" value="返回"/>
				</div>
			</div>
			<div class="content">
				<table>
					<tr>
						<td class="left">邮箱：</td>
						<td class="right">{{email}}</td>
					</tr>
					<tr>
						<td class="left">手机号：</td>
						<td class="right">{{phone}}</td>
					</tr>
					<tr>
						<td class="left">密码：</td>
						<td class="right">
							<input class="form-control" :value="form.password" v-model="form.password">
						</td>
					</tr>
					<tr>
						<td class="left">状态：</td>
						<td class="right">
							<div class="layui-form" v-if="form.status">
								<div id="switch" class="layui-unselect layui-form-switch layui-form-onswitch" lay-skin="_switch"><em>可用</em><i></i></div>
							</div>
							<div class="layui-form" v-else>
								<div id="switch" class="layui-unselect layui-form-switch" lay-skin="_switch"><em>不可用</em><i></i></div>
							</div>
						</td>
					</tr>
					<tr>
						<td class="left">绑定收款码：</td>
						<td class="right">
							<div class="input-group type-input-group">
								<div class="input-group-btn type-input-group-btn">
									<button type="button" class="status btn btn-success dropdown-toggle" data-toggle="dropdown">
										<span class="type-txt">{{paycodeTxt}}&nbsp;&nbsp;</span><span class="caret"></span>
									</button>
									<ul class="dropdown-menu dropdown-menu-right" >
										<li v-for="(paycode,index) in paycodes">
											<a href="javascript:void(0)" @click="paycodeSelect(index)">{{paycode.alias}}</a>
										</li>
									</ul>
								</div>
							</div>
						</td>
					</tr>
					<tr class="btns">
						<td class="center" colspan="2">
							<button type="button" class="btn button ok_btn" @click="submit">提交</button>
							<button type="button" class="btn button cancel_btn" @click="cancel">取消</button>
						</td>
					</tr>
				</table>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">
	var pageData = {};
	var form={};
	function initVue() {
		form.password='';
		pageData.form=form;
		new Vue({
			el:"#container-wrap",
			data:pageData
		});
		Vue.nextTick(function() {
			bindEvent();
			$("#container-wrap").show();
		});
	};
	function request(callback) {
		var id=util.getParameter("id");
		var load_id = util.load();
		util.post({
			url:"getSubDetail",
			data:{id:id},
			success : function(result) {
				pageData.id=result.id;
				pageData.email=result.email;
				pageData.phone=result.phone;
				form.paycodeId=result.paycodeId;
				form.status=result.status;
				form.id=result.id;
				processPaycodes(result);
			},
			complete : function() {
				layer.close(load_id);
			}
		},callback);
	};
	function bindEvent(){
		$("#switch").click(processStatus);
	};
	function processStatus(){
		if(form.status){
			form.status=0;
		}else{
			form.status=1;
		}
		Vue.nextTick(function() {
			$("#switch").click(processStatus);
		});
	};
	function processPaycodes(result){
		var _paycodes=result.paycodes;
		var _paycode={};
		_paycode.id=0;
		_paycode.alias="---";
		_paycodes.splice(0,0,_paycode);
		pageData.paycodeTxt="请选择";
		if(result.paycodeId != 0){
			pageData.paycodeTxt=result.paycodeAlias;
			_paycode={};
			_paycode.id=result.paycodeId;
			_paycode.alias=result.paycodeAlias;
			_paycodes.push(_paycode);
		}
		pageData.paycodes=_paycodes;
	};
	function paycodeSelect(index) {
		if(index==0){
			pageData.paycodeTxt = "请选择";
			pageData.form.paycodeId = '';
		}else{
			var paycodes=pageData.paycodes;
			for(var i in paycodes){
				var paycode=paycodes[i];
				pageData.paycodeTxt = paycode.alias;
				pageData.form.paycodeId = paycode.id;
			}
		}
	};
	function submit(){
		if($.trim(form.password)!=''){
			if(form.password.length<6){
				util.warning("密码应大于6位！");
				return ;
			}
		}
		var load_id = util.load();
		util.post({
			url:"modifySub",
			data:form,
			success : function(result) {
				cancel();
			},
			complete : function() {
				layer.close(load_id);
			}
		});
	}
	function cancel(){
		window.history.back();
	};
	function initialize(){
		request(initVue);
	};
</script>
</html>